import React from 'react';
import { Button } from 'antd';
import { PlayCircleOutlined, PauseCircleOutlined, SendOutlined } from '@ant-design/icons';
import styles from './CustomButton.less';

interface CustomButtonProps {
  text: string;
  onClick?: () => void;
  type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
  disabled?: boolean;
  icon?: 'play' | 'pause' | 'send' | 'none';
  fullWidth?: boolean;
  className?: string;
}

const CustomButton: React.FC<CustomButtonProps> = ({ 
  text, 
  onClick, 
  type = 'primary',
  disabled = false,
  icon = 'none',
  fullWidth = false,
  className = ''
}) => {
  const getIcon = () => {
    switch (icon) {
      case 'play':
        return <PlayCircleOutlined />;
      case 'pause':
        return <PauseCircleOutlined />;
      case 'send':
        return <div style={{transform: 'rotate(-45deg)', marginBottom: 6}}><SendOutlined /></div>;
      default:
        return null;
    }
  };

  return (
    <Button 
      type={type}
      className={`${styles.customButton} ${fullWidth ? styles.fullWidth : ''} ${className}`}
      onClick={onClick}
      disabled={disabled}
      icon={getIcon()}
    >
      {text}
    </Button>
  );
};

export default CustomButton;
